<template>
    <div class="viewTitle">
        <span>系统访问量</span>
    <div>
        <span :class="index == 'year' ? 'active' : ''" @click="changeIndex('year')">年</span><span
            :class="index == 'month' ? 'active' : ''" @click="changeIndex('month')">月</span>
    </div>
    </div>
    <div id="interView"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { getSysteminterview } from '@/api/index/accessRanking.js'
const index = ref('month');
const dataList = ref([]);

const changeIndex = (type) => {
    if (type == index.value) return;
    index.value = type;
    getList()
    window.addEventListener('resize', resize)
}

let myChart = null;
const renderChart = () => {
    echarts.init(document.getElementById('interView')).dispose();
    myChart = echarts.init(document.getElementById('interView'));
    let xdataList = [];
    const ydataList = dataList.value.map(item => { return item.pageView })
    let title = '';
    if (index.value == 'month') {
        // xdataList = dataList.value && dataList.value.map(item => item.unit.split('-')[2]);
        xdataList = dataList.value && dataList.value.map(item => item.unit);
        title = dataList.value[0].unit.split('-').slice(0, 2).join('/')
    } else {
        // xdataList = dataList.value && dataList.value.map(item => item.unit.split('-')[1]);
        xdataList = dataList.value && dataList.value.map(item => item.unit);
        title = dataList.value[0].unit.split('-')[0]
    }
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'none' }
        },
        grid: {
            left: "5%",
            right: "5%",
            bottom: "10%",
            top: "10%",
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xdataList,
            //x轴文字的配置
            axisLabel: {
                fontSize: 12,
                color: ' #999999',
                // interval: 0,
            },
            // name: title,
            name: '',
            nameTextStyle: {
                color: '#333'
            }
        },

        yAxis: {
            type: 'value',
            axisLabel: {
                //y轴文字的配置
                textStyle: {
                    color: '#999',
                },
            },
            axisTick: { show: false },
            axisLine: { show: false },
            //设置Y轴颜色
            splitLine: {
                show: true,
                lineStyle: { color: ['#ccc'], type: 'dashed' }
            },
            axisLabel: {
                textStyle: {
                    color: '#999',
                    fontSize: '14px',
                },
            },
            name: '次数',
            nameTextStyle: {
                color: '#333'
            }
        },
        series: [
            {
                type: "bar",
                barWidth: 10,
                color: ['#107ce5'],
                data: ydataList,
            },
        ],
    };
    // 渲染
    option && myChart.setOption(option);
}

const getList = () => {
    getSysteminterview(index.value).then(res => {
        dataList.value = res.data ? res.data : [];
        dataList.value.length && renderChart(dataList.value)
    })
}

onMounted(() => {
    getList()
    window.addEventListener('resize', resize)
})
const resize = () => {
    let myChart = echarts.init(document.getElementById("interView"));
    myChart.resize()
}
onBeforeUnmount(() => {
    window.removeEventListener('resize', resize)
})
</script>

<style scoped lang="scss">
.viewTitle {
    margin: 0;
    padding: 0 30px;
    height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f3f3f3;

    >span {
        font-size: 20px;
        font-weight: bold;
    }

    div {
        span {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            margin-left: 10px;
            text-align: center;
            background: #ccc;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
        }

        .active {
            background-color: #107ce5;
        }
    }
}

#interView {
    height: 500px;
}
</style>